<!DOCTYPE html>
<html>
<head>
	<title>任务三</title>
	<link rel="stylesheet" type="text/css" href="./statics/style/public.css">
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		.questions {
			display: flex;
			flex-direction: column;
		}
		.questionDiv {
			height: 132px;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
		}
		.questionDiv span {
			font-size: 17px;
			color: #3a2c35;
			font-weight: bold;
		}
		.question {
			padding-left: 35px;
			font-size: 15px;
		}
		.question .number {
			font-size: 17px;
			color: #07a5bb;
		}
		.question .total {
			font-size: 12px;
			color: #9f9f9f;
		}
		.questions .choices {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			margin-top: 27px;
		}
		.questions .choices .radio {
			height: 59px;
			margin: 0 20px 15px;
			background-color: #fff;
			display: flex;
			align-items: center;
			font-size: 15px;
			color: #372c34;
			background: url("./statics/img/question/untick.png") no-repeat 19px center;
			padding-left: 34px;
			align-items: center;
			background-color: #fff;
		}
		.radio span {
			color: #07a5bb;
			font-size: 17px;
			margin-left: 5px;
		}
		.questions .choices .radio_on {
			background: url("./statics/img/question/tick.png") no-repeat 19px center;
			background-color: #fff;
		}
		.nextBtns {
			width: 100%;
			margin-top: 20px;
			display: flex;
			justify-content: space-around;

		}
		.nextBtns button {
			border: none;
			outline: none;
			background-color: #fff;
			width: 100px;
			height: 30px;
			border-radius: 3px;
		}
		.nextBtns .nextBtn {
			background-color: #ffc91f;
		}

	</style>
</head>
<body>
	<div class="mainContent">
		<div class="questions">
			<div class="questionDiv">
				<span>任务三</span>
				<p class="question">
					<span class="number">1/</span>
					<span class="total">4</span>
					对坐井观天的强档解是:
				</p>
			</div>
			<div class="choices">
				<label for="answer1" class="radio radio_on">
					<span>A:</span>选择1
				</label>
				<label for="answer1" class="radio">
					<span>A:</span>选择2
				</label>
				<label for="answer1" class="radio">
					<span>C:</span>选择3
				</label>
			</div>
			<div class="nextBtns">
				<button class="preBtn">上一题</button>
				<button class="nextBtn">下一题</button>
			</div>
		</div>
	</div>
</body>
</html>